getReader()//渲染页面
tokenSet()// 封装的token
getusername()// 封装用户名称
tuchu()//退出登录

// 渲染页面
async function getReader() {
	const res = await axios({ url: '/dashboard', })
	console.log(res);
	const { overview, year,salaryData,groupData,provinceData} = res.data

	readerGet(overview)//渲染表单的统计数据
	readerYear(year)//线状图
	readerSalaryData(salaryData)//饼状图
	readerGroupData(groupData)// 柱状图  班级每组薪资 
	readersSalaryData(salaryData)//男女薪资分布
	readerProvinceData(provinceData)//地图籍贯的分布 
 
	

}
// 渲染表单统计数据
function readerGet(overview) {
	// 使用 for in 渲染表单
	for (const key in overview) {
	// 这一行代码可以直接遍历所有的表单，因为他们的类名和数据名字相同
	document.querySelector(`.${key}`).innerHTML=overview[key]
	}
}
 
// 线状图 班级学科走势
function readerYear(year) {
	 // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(document.querySelector("#line"));

      // 指定图表的配置项和数据
	const option = {
		title: {
			text: '2023全学科走势',
			left: 18,
			top:15
		  },
        xAxis: {
          type: "category",
			data: year.map(v => v.month),
			axisLine: {
				lineStyle: {
					type: 'dashed',
					color:'rgba(65, 206, 255)'
			}
		}
        },
        yAxis: [{
			type: "value",
			splitLine: {
     			 lineStyle: {
					type: "dashed",
					color:'rgba(65, 206, 255)'
     			}
   			}
        }],
        series: [
          {
            data: year.map(v=>v.salary),
            type: "line",
				smooth: true,
			symbolSize: 10,
			lineStyle: {
       		  width: 5,
       		  shadowColor: 'rgba(104, 156, 255,0.3)',
       		  shadowBlur: 10,
       		  shadowOffsetY: 8
			},
			areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(224, 244, 255,1)'
          },
          {
            offset: 1,
            color: `rgba(255, 255, 255,1)`
          }
        ])},
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
}

// 饼状图 班级薪资分布
function readerSalaryData(salaryData) {
 
// 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(document.querySelector("#salary"));

   const option = {
		title: {
			text: '班级薪资分布图',
			left: 15,
			top:10
			
		},
		tooltip: {
			trigger: 'item'
		},
		legend: {
			bottom: '5%',
			left: 'center'
		},
		series: [
			{
			
			type: 'pie',
			radius: ['50%', '70%'],
			avoidLabelOverlap: false,
			itemStyle: {
				borderRadius: 10,
				borderColor: '#fff',
				borderWidth: 2
			},
			label: {
				show: false,
				position: 'center'
			},
			emphasis: {
				label: {
				show: true,
				fontSize: 40,
				fontWeight: 'bold'
				}
			},
			labelLine: {
				show: false
			},
			data: salaryData.map(v => {
					return {
						value: v.g_count + v.b_count,
						name: v.label
					}
					})
			}
	   ],
		color:['#ffb227','#5097ff','#45e2ff','#39e8a9']
	};
	    // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
}
 
// 柱状图  班级每组薪资
function readerGroupData(groupData) {
// 基于准备好的dom，初始化echarts实例
const myChart = echarts.init(document.querySelector("#lines"));
  option = {
   xAxis: [
    {
      type: 'category',
      // prettier-ignore
      data:groupData['1'].map(v=>v.name)
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '期望薪资',
      type: 'bar',
      data:groupData['1'].map(v=>v.hope_salary)
    },
    {
      name: '实际薪资',
      type: 'bar',
     data:groupData['1'].map(v=>v.salary)
    }
  ]
};
	
// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);
// 点击分页栏更新数据
document.querySelector('#btns').addEventListener('click',function(e){
	if (e.target.classList.contains('btn-xs')) {

		document.querySelector('#btns button.btn-blue').classList.remove('btn-blue')
		e.target.classList.add('btn-blue')
		const key =e.target.innerText
	
		myChart.setOption({
			xAxis: [
				{
			
				data:groupData[key].map(v=>v.name)
				}
			],
			series: [
				{
		
				data:groupData[key].map(v=>v.hope_salary)
				},
				{

				data:groupData[key].map(v=>v.salary)
				}
			]
		});
	}
})
}

// 饼状图 男女薪资分布
function readersSalaryData(salaryData) {
 
// 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(document.querySelector("#gender"));
	const datas = [
		salaryData.map(v=>({name:v.label,value:v.b_count})),
		salaryData.map(v=>({name:v.label,value:v.g_count})),
		]

	let  option = {
		title: [
			{
				text: '男女薪资分布',
				left: 20,
				top:20
			},
			{
				text: '男生',
				left: 'center',
				top:'40%'

			},
		 	{
				  text: '女生',
				  left: 'center',
				  top:'85%'
			},
		],
		color:['#ffb227','#5097ff','#45e2ff','#39e8a9'],
		series: datas.map(function (data, idx) {
			var top = idx * 45+10;
			return {
			type: 'pie',
			radius: [40, 60],
			top: top + '%',
			height: '33.33%',
			left: 'center',
			width: 300,
			
			label: {
				alignTo: 'edge',
				minMargin: 5,
				edgeDistance: 10,
				lineHeight: 15,
				rich: {
				time: {
					fontSize: 10,
					color: '#999'
				}
				}
			},
			labelLine: {
				length: 25,
				length2: 0,
				maxSurfaceAngle: 80
			},
			
			data: data
			};
		})
	  };
	    // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
}
// 地图籍贯的分布 
function readerProvinceData(provinceData) {

	// 这里是定义的加数据
	const resArr = [{
                name: '北京',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '天津',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '上海',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '重庆',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '河北',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '河南',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '云南',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '辽宁',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '黑龙江',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '湖南',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '安徽',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '山东',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '新疆',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '江苏',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '浙江',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '江西',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '湖北',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '广西',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '甘肃',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '山西',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '内蒙古',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '陕西',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '吉林',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '福建',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '贵州',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '广东',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '青海',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '西藏',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '四川',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '宁夏',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '海南',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '台湾',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '香港',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
                name: '澳门',
                value: Math.round(Math.random() * 1000),
                tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
	},]
	const errArr =[]
	resArr.forEach(item1 => {
		// item1 为不带省字的省 比如 湖北
		// item2 为带省子的省  比如湖北省
		// 这里是查找满足条件的数据  然后进行判断字符串内是否包含省字
		const index = provinceData.findIndex(item2 => item2.name.includes(item1.name))
		console.log(index);
		// 判断如果数据等于-1
		if (index === -1) {
			// 那么就把他不带省字数据推送到空数组
			errArr.push({name:item1.name,value:0,tipData:0})
		} else {
			// 就把他的tipData等于value
			provinceData[index].tipData = provinceData[index].value
			// 属性的下标的名字等于不带省字的名字
			provinceData[index].name = item1.name
			// 然后推送到空数组
			errArr.push(provinceData[index])
		}
  });
  const myChart = echarts.init(document.querySelector("#map"));	
 const option = {
    title: {
      text: '籍贯分布',
      top: 10,
      left: 10,
      textStyle: {
        fontSize: 16,
      },
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} 位学员',
      borderColor: 'transparent',
      backgroundColor: 'rgba(0,0,0,0.5)',
      textStyle: {
        color: '#fff',
      },
    },
    visualMap: {
      min: 0,
      max: 6,
      left: 'left',
      bottom: '20',
      text: ['6', '0'],
      inRange: {
        color: ['#ffffff', '#0075F0'],
      },
      show: true,
      left: 40,
    },
    geo: {
      map: 'china',
      roam: false,
      zoom: 1.0,
      label: {
        normal: {
          show: true,
          fontSize: '10',
          color: 'rgba(0,0,0,0.7)',
        },
      },
      itemStyle: {
        normal: {
          borderColor: 'rgba(0, 0, 0, 0.2)',
          color: '#e0ffff',
        },
        emphasis: {
          areaColor: '#34D39A',
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 20,
          borderWidth: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
    series: [
      {
        name: '籍贯分布',
        type: 'map',
        geoIndex: 0,
        data: errArr,
      },
    ],
  }
myChart.setOption(option);
}
// 封装用户名称
function getusername() {
	document.querySelector('.username').innerHTML =localStorage.getItem('username')
}
// 退出登录
function tuchu() {
	const logout = document.querySelector('#logout')
	logout.addEventListener('click', function (e) {
		if (confirm('你确定退出吗？')) {
			localStorage.removeItem('token')
			location.href='./login.html'
			
		}
	})
}

